<template>
	<view class="News">
		<cu-custom :isBack="true" textWeight='600' textSize='16' fhColor="#000" textColor="#333">
			<block slot="content">公司新闻</block>
		</cu-custom>
		<!-- 搜索 -->
		<view class="seach">
			<view class="icon">
				<img :src="imgUrl+'search.png'" alt="">
			</view>
			<view class="line"></view>
			<view class="seached">
				<input class="uni-input" @confirm="search" placeholder="搜索" v-model="title" />
			</view>
			<view class="btn" @click="search">搜索</view>
		</view>
		<!-- nav栏 -->
		<view class="tabbar">
			<view class="tab" :class="active===''?'active':''" @click="tapclick('')">全部</view>
			<view class="tab" :class="item.id===active?'active':''" v-for="item in tabBar" :key="item.id"
				@click="tapclick(item.id)">{{item.name}}</view>
		</view>
		<!-- 列表 -->
		<scroll-view class="scroll" scroll-y="true" lower-threshold="30" @scrolltolower="scrolltolower">
			<view class="list">
				<view class="item" v-for="i in list" :key="i.id" @click="toDetails(i.id)">
					<view class="image">
						<img :src="i.coverImage" alt="">
					</view>
					<view class="title">{{i.title}}</view>
					<view class="tip">{{i.groupName}}</view>
				</view>
			</view>
			<view class="tip"> 没有更多了 ~~</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 输入框内容
				title: '',
				page: 1,
				size: 10,
				total: '',
				// 新闻列表
				list: [],
				// 新闻tab栏
				tabBar: [],
				// 切换状态
				active: '',

				imgUrl: this.$http.imgUrl + '/static/news/'
			}
		},
		onLoad() {
			this.getData()
			this.getTabBar()
		},
		methods: {
			// 获取新闻分类标签
			async getTabBar() {
				const url = this.api.news.informationLabel
				const res = await this.https.get(url)
				this.tabBar = res
			},
			// 获取新闻列表
			async getData() {
				const res = await this.https.get(this.api.news.InformationSelect, {
					groupId: this.active, //	分组id	query	false	
					pageNumber: this.page, //	查询页码,默认值为1	query	false	
					pageSize: this.size, //	查询页大小,默认值为10	query	false	
					title: this.title, //
				})
				if (res) {
					this.total = res.totalCount
					if (this.page === 1) {
						this.list = res.data
					} else {
						this.list.push(...res.data)
					}
				} else {
					uni.showToast({
						title: '暂时没有数据',
						icon: 'none'
					})
				}

			},
			// 切换状态栏
			tapclick(id) {
				this.initData()
				this.title = ''
				this.active = id
				this.getData()
			},
			// 点击搜索
			search() {
				// console.log(e,'111');
				this.initData()
				this.getData()
			},
			// 去新闻详情
			toDetails(id) {
				uni.navigateTo({
					url: './details?id=' + id
				})
			},
			// 下拉刷新
			scrolltolower() {
				if (this.list.length === this.total) return
				this.page++
				this.getData()
			},
			// 初始化
			initData() {
				this.page = 1,
					this.size = 10,
					this.list = [],
					this.total = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.News {
		height: 100vh;
		background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/bac.png) no-repeat;
		background-size: 100%;

		.seach {
			width: 702rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			margin: 0 auto;
			position: relative;

			.icon {
				margin-top: 2px;
				margin-left: 16rpx;

				img {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.line {
				width: 2rpx;
				height: 40rpx;
				background: rgba(153, 153, 153, 0.2);
				border-radius: 2rpx;
				margin-left: 16rpx;
			}

			.seached {
				margin-left: 14rpx;
				height: 48rpx;
				width: 480rpx;

				input {
					width: 470rpx;
					height: 48rpx;
					caret-color: #4D8BFF;
					::placeholder {
					  /* placeholder 的样式 */
					  font-size: 28rpx;
					}
				}
			}

			.btn {
				position: absolute;
				right: 8rpx;
				width: 120rpx;
				height: 56rpx;
				background: #4D8BFF;
				border-radius: 28rpx;
				text-align: center;
				line-height: 56rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.tabbar {
			height: 44rpx;
			width: 702rpx;
			margin-left: 24rpx;
			margin-top: 32rpx;
			display: flex;

			.tab {
				height: 44rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #9F9F9F;
				line-height: 44rpx;
				margin-right: 40rpx;

				&.active {

					color: #333333;
					font-weight: 700;
					background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%) no-repeat;
					background-size: 32rpx 4rpx;
					background-position: bottom center;

				}
			}
		}

		.scroll {
			height: 78vh;
			margin-top: 42rpx;

			.list {
				margin: 0 24rpx;
				padding-top: 4rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					width: 340rpx;
					height: 284rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
					border-radius: 8rpx;
					margin-bottom: 26rpx;
					position: relative;

					.image {
						width: 340rpx;
						height: 192rpx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						width: 316rpx;
						;
						height: 72rpx;
						margin: 0 auto;
						// margin-top: 10rpx;
						padding-top: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;

						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.tip {
						width: 112rpx;
						height: 40rpx;
						background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
						border-radius: 2rpx 8rpx 2rpx 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						position: absolute;
						right: -2rpx;
						top: -2rpx;
					}
				}
			}

			.tip {
				height: 80rpx;
				line-height: 80rpx;
				width: 100%;
				text-align: center;
			}
		}


	}
</style>